;;;;
var videoDetail = {
    poster: '../img/videoDetail/san.png',
    src: '../video/05_tabbar.mp4',
    title: '初三数学班',
    year: '2019年秋季',
    grade: '初三数学',
    time: 15,
    duration: '09月30日—12月20日',
    period: '2020年12月20日',
    end: 1616206481238,
    day: 33,
    h: 23,
    m: 23,
    s: 23,
    price: 199,
    isFree: true,
    singlePrice: 199,
    group: 99,
    teacher: '李晓明',
    teacherTitle: '小U课堂高级讲师',
    introduce: '多年IT行业从业经验，精通常用的Web开发技术;熟悉主流的CMS、商城、论坛 等PHP开源产品，具有丰富的建站及二次开发经验，多个大型ERP系统的开发实践经验;精通常用的PHP开发框架，对服务器架构及服务器日常运维等方面有一 定的研究。'
};

var classList = [{
    title: '第一章：公开课',
    num: 4,
    list: [
        { name: '第0节：化学的研究对象和研究方法', time: '2020.12.10 20：00' },
        { name: '第1节：离子反应', time: '2020.12.10 20：00' },
        { name: '第2节：氧化还原反应', time: '2020.12.10 20：00' },
        { name: '第3节：钠及其化合物', time: '2020.12.10 20：00' }
    ]
}, {
    title: '第二章：公开课',
    num: 4,
    list: [
        { name: '第0节：化学的研究对象和研究方法', time: '2020.12.10 20：00' },
        { name: '第1节：离子反应', time: '2020.12.10 20：00' },
        { name: '第2节：氧化还原反应', time: '2020.12.10 20：00' },
        { name: '第3节：钠及其化合物', time: '2020.12.10 20：00' }
    ]
}, {
    title: '第三章：公开课',
    num: 4,
    list: [
        { name: '第0节：化学的研究对象和研究方法', time: '2020.12.10 20：00' },
        { name: '第1节：离子反应', time: '2020.12.10 20：00' },
        { name: '第2节：氧化还原反应', time: '2020.12.10 20：00' },
        { name: '第3节：钠及其化合物', time: '2020.12.10 20：00' }
    ]
}, {
    title: '第四章：公开课',
    num: 4,
    list: [
        { name: '第0节：化学的研究对象和研究方法', time: '2020.12.10 20：00' },
        { name: '第1节：离子反应', time: '2020.12.10 20：00' },
        { name: '第2节：氧化还原反应', time: '2020.12.10 20：00' },
        { name: '第3节：钠及其化合物', time: '2020.12.10 20：00' }
    ]
}, {
    title: '第五章：公开课',
    num: 4,
    list: [
        { name: '第0节：化学的研究对象和研究方法', time: '2020.12.10 20：00' },
        { name: '第1节：离子反应', time: '2020.12.10 20：00' },
        { name: '第2节：氧化还原反应', time: '2020.12.10 20：00' },
        { name: '第3节：钠及其化合物', time: '2020.12.10 20：00' }
    ]
}, {
    title: '第六章：公开课',
    num: 4,
    list: [
        { name: '第0节：化学的研究对象和研究方法', time: '2020.12.10 20：00' },
        { name: '第1节：离子反应', time: '2020.12.10 20：00' },
        { name: '第2节：氧化还原反应', time: '2020.12.10 20：00' },
        { name: '第3节：钠及其化合物', time: '2020.12.10 20：00' }
    ]
}];

var classImgList = [
    '../img/videoDetail/detail.png'
];

var mulu = document.getElementsByClassName('dag1')[0]
console.log(mulu);//目录课程
var kech = document.getElementsByClassName('dag2')[0]
console.log(kech);//目录课程
var kec = document.querySelector('.detail')
console.log(kec);//列表
var zhan = document.querySelector('.zhan')
console.log(zhan);//展开
var dai = document.querySelector('.dai')
console.log(dai);//datu
// 
// 渲染内容
var details = document.querySelector('.details')
console.log(details);
var teacher = document.querySelector('#teacher')
console.log(teacher);


details.innerHTML = `
<ul class="math">
<li class="te">[${videoDetail.year}]${videoDetail.title}</li>
<li>年级科目:${videoDetail.grade}</li>
<li>课时数量:${videoDetail.time}课时</li>
<li>开课时间:${videoDetail.duration}</li>
<li>有效期至:${videoDetail.period}</li>
<li>距报名截止仅剩</li>
<li>
    <span> ${videoDetail.day}</span>天
    <span>${videoDetail.h}</span>时
    <span>${videoDetail.m}</span>分
    <span>${videoDetail.s}</span>秒
</li>
</ul>

<div class="jiage">
<p class="jiaget">
    <span>￥${videoDetail.price}</span>
    <button class="xue" style="cursor: pointer;">免费试学</button>
</p>
<p class="jiageb">
    <span>￥${videoDetail.singlePrice}单独购买</span>
    <span>|</span>
    <span>￥${videoDetail.group}拼团</span>
</p>
</div>
`
teacher.innerHTML = `
<p class="tea1">
授课师资
</p>
<div class="teah">
<div class="teaf">
    <div class="teafl">
        <div class="img">
            <img src="../img1/login/user.png" alt="">
        </div>
        <p class="teaflp">
            <span>
            ${videoDetail.teacher}</span>
            <br>
            <span>${videoDetail.teacherTitle}</span>
        </p>
    </div>
    <div class="team">

    </div>
    <p class="tear">
       ${videoDetail.introduce}
    </p>
</div>
</div>
`
kec.innerHTML = classList.map(function (item) {
    return `
    <ul>
    <li>
        <h3>${item.title}（含${item.num}期） <span></span></h3>
        <ol>
        ${item.list.map(function (itm) {
        return `
            <li>
           
                <div class="li1">
                <img src="../img1/public/left.png" alt="">
                &nbsp; &nbsp; 
                <span>
                ${itm.name}
                    </span>
                </div>
                <p>  ${itm.time} 开播</p>
                <div class="bo1" style="cursor: pointer;">点击播放</div>
            </li>

           
            `
    }).join('')
        }

        </ol>
    </li>
  
    `
}).join('')












// 目录和图片的转换
mulu.onclick = function () {
    kec.style.display = 'block'
    zhan.style.display = 'block'
    dai.style.display = 'none'
    kech.style.color = 'black'
    mulu.style.color = 'white'
    mulu.style.backgroundColor = '#80c4ae'
    kech.style.backgroundColor = 'white'
}
kech.onclick = function () {
    kec.style.display = 'none'
    zhan.style.display = 'none'
    dai.style.display = 'block'
    mulu.style.color = 'black'
    kech.style.color = 'white'
    kech.style.backgroundColor = '#80c4ae'
    mulu.style.backgroundColor = 'white'
}
// 
// 
// 
// 
//     // 列表伸缩
var oli = document.querySelectorAll('.detail ol li')
var btn = document.querySelectorAll('.detail h3 span')
var ol = document.querySelectorAll('.detail ol')
console.log(ol);
var act1 =document.querySelectorAll('.detail ol li p')
console.log(act1);
var bo1 =document.querySelectorAll('.bo1')
console.log(bo1);
// 鼠标滑到列表时(显示开始播放)
for (var i = 0; i < oli.length; i++) {
   oli[i].index = i
    oli[i].onmouseover = function () {
        for (var k = 0; k < oli.length; k++) {
            oli[k].className = ''
            
        }
        this.className = 'active'
         act1[this.index].style.display='none'
         bo1[this.index].style.display='block'
    }
    // 鼠标离开列表时(开始播放消失)
    oli[i].onmouseout = function () {
        for (var k = 0; k < oli.length; k++) {
            oli[k].className = ''
            act1[k].style.display='block'
             bo1[k].style.display='none'
        }
        
    }

}
// 
// 
// 
// 点击收缩按钮时
for (var j = 0; j < btn.length; j++) {
    btn[j].flag = "true" //  表示展开状态
    btn[j].index = j //自定义索引

    btn[j].onclick = function () {
        console.log(this.flag == "true");
        if (this.flag == "true") {
            ol[this.index].style.display = 'none'
            this.flag = "false"
            btn[this.index].style.transform = "rotate(-90deg)"


        } else {
            ol[this.index].style.display = 'block'
            this.flag = "true"
            btn[this.index].style.transform = "rotate(0deg)"
        }
    }
}

console.log(ol.length);
// 点击展开按钮时
zhan.onclick = function () {
    for (let i = 0; i < ol.length; i++) {
        ol[i].style.display = 'block'
        btn[i].flag = "true"
        btn[i].style.transform = "rotate(0deg)"
    }
}




// 登录和退出
var   xue =document.querySelector('.xue')
console.log(xue);
// 
console.log(localStorage.isLogin);
var he =document.querySelector('.he')
console.log(he);
var img =document.querySelector('.img')
console.log(img);//头像
var ls =document.querySelector('.hea3 p')
console.log(ls);//登录注册
var hea3a =document.querySelector('.hea3a')
console.log(hea3a);
if(localStorage.isLogin=="true"){ //登录了
    // img.src = localStorage.logo
    he.style.display='block'
    ls.style.display='none'
   
    
}else{
    //隐藏头像
    he.style.display = 'none'
    ls.style.display='inline-block'
}
// 显示列表
img.onmouseover=function(){
hea3a.style.display='block'
}
document.onclick=function(){
    hea3a.style.display='none'
    }


//退出登录
var tui = document.querySelectorAll('.hea3a li')
console.log(tui);
tui[tui.length-1].onclick=function(){
    localStorage.removeItem('isLogin')
     //隐藏头像
     he.style.display = 'none'
     ls.style.display='inline-block'
 }
// 点击免费试学进入播放页
var wai =document.querySelector('#wai')
console.log(wai);
xue.onclick=function(){

        if(localStorage.isLogin=='true'){
            location.href= './videoplay.html'
        }else{
            //登录
            wai.style.display='block'
            document.documentElement.style.overflow = 'hidden';
        }
    }
// 点击【点击播放】时
for (let i = 0; i < bo1.length; i++) {
    bo1[i].onclick=function(){

        if(localStorage.isLogin=='true'){
            location.href= './videoplay.html'
        }else{
            //登录
            wai.style.display='block'
            document.documentElement.style.overflow = 'hidden';
        }
    }
    
}


    // 点击免费试学-登录-进入播放页
    form.onsubmit = function () {

        var flag = arr.every(function (item) {
            return item
        })
        if (flag) {
            // 保存一个状态  证明当前已经登录
            Y.Storage('isLogin', true)
            Y.Storage('logo', "../img1/login/user.png");
            Y.Storage('isLogin', true);
            location.href = './videoplay.html'
        } else {
            alert('账号或密码错误！')
        }
    
        return false
    
    
    }



